<template>
    <div>
        <!-- <el-row type="flex" class="row-bg mb20" justify="end">
            <el-button type="primary" size="mini" @click="submit()" :disabled="loading">
                保存</el-button>
        </el-row> -->
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
            <el-col :span="8">
                <el-form-item label="老人姓名" prop="name">
                    <el-input v-if="edit" v-model="form.name" placeholder="请输入老人姓名" />
                    <span v-else>{{ form.name }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex" v-if="edit">
                        <el-radio v-for="dict in sexList" :key="dict.dictValue" :label="Number(dict.dictValue)">
                            {{ dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                    <span v-else>{{ form.sex_value }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="出生年月" prop="birthday">
                    <el-date-picker v-if="edit" v-model="form.birthday" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择生产日期" :default-value="defaultime" />
                    <span v-else>{{ form.birthday }}</span>
                </el-form-item>
            </el-col>

            <el-col :span="8">
                <el-form-item label="民族" prop="nation">
                    <el-select v-if="edit" v-model="form.nation" placeholder="请选择民族" filterable clearable>
                        <el-option v-for="dict in nationList" :key="dict.value" :label="dict.info" :value="dict.info" />
                    </el-select>
                    <span v-else>{{ form.nation }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="身份证号" prop="id_card">
                    <el-input v-if="edit" v-model="form.id_card" placeholder="请输入身份证号" />
                    <span v-else>{{ form.id_card }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="政治面貌" prop="political">
                    <el-select v-if="edit" v-model="form.political" placeholder="请选择政治面貌" filterable clearable>
                        <el-option v-for="dict in politicalList" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                    <span v-else>
                        {{ selectDictLabel(politicalList, form.political) }}
                    </span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="社保卡号" prop="security_cardno">
                    <el-input v-if="edit" v-model="form.security_cardno" type="number" placeholder="请输入社保卡号" />
                    <span v-else>{{ form.security_cardno }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="联系电话:" prop="mobile">
                    <el-input v-if="edit" v-model="form.mobile" class="handle-input mr10" placeholder="请输入老人联系电话">
                    </el-input>
                    <span v-else>{{ form.mobile }}</span>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
                <el-form-item label="最高学历" prop="highest_education">
                    <el-select v-if="edit" v-model="form.highest_education" placeholder="请输入选择最高学历" filterable
                        clearable>
                        <el-option v-for="dict in educationList" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                    <span v-else>
                        {{ selectDictLabel(educationList, form.highest_education) }}
                    </span>
                </el-form-item>
            </el-col> -->
            <el-col :span="7" :offset="1">
                <el-form-item label="是否有退休金" prop="is_pension">
                    <el-radio-group v-model="form.is_pension" v-if="edit">
                        <el-radio v-for="dict in yesNo" :key="dict.dictValue" :label="Number(dict.dictValue)">
                            {{ dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                    <span v-else>{{ selectDictLabel(yesNo, form.is_pension) }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-col :span="8">
                    <el-form-item label="籍贯省份" prop="native_place_province">
                        <el-select v-if="edit" v-model="form.native_place_province" placeholder="请输入选择籍贯省份"
                            @change="getNativeCity" clearable>
                            <el-option v-for="dict in areaData" :key="dict.code" :label="dict.name"
                                :value="dict.name" />
                        </el-select>
                        <span v-else>
                            {{ form.native_place_province }}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯城市" prop="native_place_city">
                        <el-select v-if="edit" v-model="form.native_place_city" placeholder="请输入选择籍贯城市"
                            @change="getNativeArea" filterable clearable>
                            <el-option v-for="dict in cityList" :key="dict.code" :label="dict.name"
                                :value="dict.name" />
                        </el-select>
                        <span v-else>
                            {{ form.native_place_city }}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯区/县" prop="native_place_area">
                        <el-select v-if="edit" v-model="form.native_place_area" placeholder="请输入选择籍贯区/县" filterable
                            clearable>
                            <el-option v-for="dict in areaList" :key="dict.code" :label="dict.name"
                                :value="dict.name" />
                        </el-select>
                        <span v-else>
                            {{ form.native_place_area }}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="籍贯详细地址" prop="native_place_detailed">
                        <el-input v-if="edit" v-model="form.native_place_detailed" placeholder="请输入籍贯详细地址" />
                        <span v-else>
                            {{ form.native_place_detailed }}
                        </span>
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col :span="24">
                <el-col :span="8">
                    <el-form-item label="现居住省份" prop="current_place_province">
                        <el-select v-if="edit" v-model="form.current_place_province" placeholder="请输入选择现居住省份"
                            @change="getCurrentCity" clearable>
                            <el-option v-for="dict in areaData" :key="dict.code" :label="dict.name"
                                :value="dict.name" />
                        </el-select>
                        <span v-else>
                            {{ form.current_place_province }}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居住城市" prop="current_place_city">
                        <el-select v-if="edit" v-model="form.current_place_city" placeholder="请输入选择现居住城市"
                            @change="getCurrentArea" filterable clearable>
                            <el-option v-for="dict in currentCityList" :key="dict.code" :label="dict.name"
                                :value="dict.name" />
                        </el-select>
                        <span v-else>
                            {{ form.current_place_city }}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居住区/县" prop="current_place_area">
                        <el-select v-if="edit" v-model="form.current_place_area" placeholder="请输入选择现居住区/县" filterable
                            clearable>
                            <el-option v-for="dict in currentAreaList" :key="dict.code" :label="dict.name"
                                :value="dict.name" />
                        </el-select>
                        <span v-else>
                            {{ form.current_place_area }}
                        </span>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居住详细地址" prop="current_place_detailed">
                        <el-input v-if="edit" v-model="form.current_place_detailed" placeholder="请输入现居住详细地址" />
                        <span v-else>
                            {{ form.current_place_detailed }}
                        </span>
                    </el-form-item>
                </el-col>
            </el-col>

            <el-col :span="12">
                <el-form-item label="婚姻状况" prop="marital_status">
                    <el-radio-group v-if="edit" v-model="form.marital_status">
                        <el-radio v-for="dict in marryList" :key="dict.dictValue" :label="Number(dict.dictValue)">
                            {{ dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                    <span v-else>
                        {{ selectDictLabel(marryList, form.marital_status) }}
                    </span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="受教育程度" prop="education_level">
                    <el-radio-group v-if="edit" v-model="form.education_level">
                        <el-radio v-for="dict in educationLevel" :key="dict.dictValue" :label="Number(dict.dictValue)">
                            {{ dict.dictLabel }}
                        </el-radio>
                    </el-radio-group>
                    <span v-else>
                        {{ selectDictLabel(educationLevel, form.education_level) }}
                    </span>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="老人头像" prop="avatar">
                    <el-upload v-if="edit" class="avatar-uploader"
                        :action="$uploadUrl" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="form.avatar" :src="form.avatar" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-image v-else style="width: 100px; height: 100px;border:1px solid #eee;" :src="form.avatar"
                        :preview-src-list="[form.avatar]">
                    </el-image>
                </el-form-item>
            </el-col>
            <el-col class="row-bg" justify="end" :span="24" v-if="edit">
                <el-button type="primary" size="mini" @click="submit()" :disabled="loading">
                    保存</el-button>
            </el-col>
        </el-form>
    </div>
</template>

<script>
import { seX, Politics, educationDegree, maritalStatus, educationLevel, yesNo } from "@/api/dictionary"
import { isvalidatemobile, cardid } from "@/utils/validate";
import throttle from 'lodash.throttle'
import { setHospToBasics, getHospToBasics } from "@/api/marketing/admit"
export default {
    name: '',
    props: {
        handleShow: {
            type: String, //add新增edit编辑
            default: ""
        },
        customerId: {
            type: String,
        }
    },
    data() {
        const cardId = (rule, value, callback) => {
            if (cardid(value)[0]) {
                callback(new Error(cardid(value)[1]));
            } else {
                callback();
            }
        };
        const ismobile = (rule, value, callback) => {
            if (isvalidatemobile(value)[0]) {
                callback(new Error(isvalidatemobile(value)[1]));
            } else {
                callback();
            }
        };
        return {
            loading: false,
            sexList: seX,
            politicalList: Politics,
            educationList: educationDegree,
            marryList: maritalStatus,
            educationLevel: educationLevel,
            cityList: [],
            areaList: [],
            currentCityList: [],
            currentAreaList: [],
            defaultime: new Date('1960-01-01'),
            form: {
                id: null,
                customer_id: this.customerId,
                native_place_province: null,
                native_place_city: null,
                native_place_area: null,
                native_place_detailed: null,
                current_place_province: null,
                current_place_city: null,
                current_place_area: null,
                current_place_detailed: null,
                id_card: null,
                sex: null,
                marital_status: null,
                education_level: null,
                avatar: null,
                nation: "汉族",
                is_pension: '',
                mobile: '',
            },
            rules: {
                name: [{ required: true, message: "请输入老人姓名", trigger: "blur" },],
                sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
                birthday: [{ required: true, message: '请选择出生年月', trigger: 'change' }],
                nation: [{ required: true, message: '请选择民族', trigger: 'change' }],
                id_card: [
                    { required: true, message: "请输入身份证号", trigger: "blur" },
                    { validator: cardId, trigger: "blur" },
                ],
                political: [{ required: true, message: '请选择政治面貌', trigger: 'change' }],
                // security_cardno: [{ required: true, message: "请输入社保卡号", trigger: "blur" },],
                mobile: [{ required: true, message: "请输入联系方式", trigger: "blur" },
                { validator: ismobile, trigger: "blur" }
                ],
                is_pension: [{ required: true, message: '请选择是否有退休金', trigger: 'change' }],
                // highest_education: [{ required: true, message: '请选择最高学历', trigger: 'change' }],
                native_place_province: [{ required: true, message: '请选择籍贯省份', trigger: 'change' }],
                native_place_city: [{ required: true, message: '请选择籍贯城市', trigger: 'change' }],
                native_place_area: [{ required: true, message: '请选择籍贯区/县', trigger: 'change' }],
                native_place_detailed: [{ required: true, message: '请选择籍贯详细地址', trigger: 'change' }],
                current_place_province: [{ required: true, message: '请选择现居住省份', trigger: 'change' }],
                current_place_city: [{ required: true, message: '请选择现居住城市', trigger: 'change' }],
                current_place_area: [{ required: true, message: '请选择现居住区/县', trigger: 'change' }],
                current_place_detailed: [{ required: true, message: '请选择现居住详细地址', trigger: 'change' }],
                marital_status: [{ required: true, message: '请选择婚姻状况', trigger: 'change' }],
                education_level: [{ required: true, message: '请选择受教育程度', trigger: 'change' }],
                avatar: [{ required: true, message: '请上传老人头像', trigger: 'change' }],
            },
            edit: true,
            yesNo: yesNo,
        }
    },
    watch: {
        "customerId"(val) {
            if (val) {
                this.getDetail()
            }
        }
    },
    created() {
        this.edit = this.handleShow == "detail" ? false : true
        this.getDetail()
    },
    methods: {
        getDetail() {
            if (this.customerId) {
                getHospToBasics({ customer_id: this.customerId }).then(res => {
                    this.form = { ...this.form, ...res.data }
                    this.cityList = this.form.native_place_province ? this.areaData.find(item => item.name == this.form.native_place_province).cityList : []
                    this.areaList = this.form.native_place_province && this.form.native_place_city ? this.cityList.find(item => item.name == this.form.native_place_city).areaList : []
                    this.currentCityList = this.form.current_place_province ? this.areaData.find(item => item.name == this.form.current_place_province).cityList : []
                    this.currentAreaList = this.form.current_place_province && this.form.current_place_city ? this.currentCityList.find(item => item.name == this.form.current_place_city).areaList : []
                })
            }
        },
        changeProvince() {
            if (this.form.native_place_province) {
                this.cityList = this.areaData.find(item => item.code == this.form.native_place_province).cityList;
                this.form.provinceName = this.areaData.find(item => item.code == this.form.native_place_province).name;
            } else {
                this.cityList = [];
                this.form.provinceName = '';
                this.$set(this.form, "native_place_city", null)
                this.$set(this.form, "cityName", null)
            }
            this.$set(this.form, "native_place_city", null)
            this.$set(this.form, "cityName", null)
            this.$forceUpdate()
        },
        handleAvatarSuccess(res, file) {
            this.$set(this.form, 'avatar', res.data[0].fileurl)
        },
        submit: throttle(function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    setHospToBasics(this.form).then(res => {
                        this.form = {}
                        this.$emit("getCustomerId", res.data.customer_id)
                        this.msgSuccess("操作成功！");
                        this.loading = false;
                        this.$emit("update", "second")
                    }).catch(() => {
                        this.loading = false;
                    })
                }
            })
        }, 1000, { trailing: false }),
        getNativeCity(val) {
            if (val) {
                this.$set(this.form, "native_place_city", null)
                this.$set(this.form, "native_place_area", null)
                this.areaList = []
                this.cityList = this.areaData.find(item => item.name == val).cityList;
            }
        },
        getNativeArea(val) {
            if (val) {
                this.$set(this.form, "native_place_area", null)
                this.areaList = this.cityList.find(item => item.name == val).areaList;
            }
        },
        getCurrentCity(val) {
            if (val) {
                this.$set(this.form, "current_place_city", null)
                this.$set(this.form, "current_place_area", null)
                this.currentAreaList = []
                this.currentCityList = this.areaData.find(item => item.name == val).cityList;
            }
        },
        getCurrentArea(val) {
            if (val) {
                this.$set(this.form, "current_place_area", null)
                this.currentAreaList = this.currentCityList.find(item => item.name == val).areaList;
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.row-bg {
    display: flex;
    justify-content: flex-end;
}

/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100px !important;
    height: 100px !important;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px !important;
    height: 100px !important;
    line-height: 100px !important;
    /* text-align: center;
    display: block !important; */
}

.avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>
